<template>
	<view class="select-rescue-wrap">
		<navBar :title="title" :showHome="false" :showBack="true" marginLeft="25%" />
		<view class="content-box" :style="{ marginTop: getSystemInfo.navBarHeight + 'px' }">
			<view class="search-box">
				<u-search :placeholder="statusType==1?'请输入救援地址':'请输入拖车目的地'" v-model="keyword" @search="handleSearch"
					:showAction="false" height="60" searchIconSize="40"></u-search>
			</view>
			<view class="current-addr" v-if="statusType == 1" @click="setCurrentAddress">
				<view class="addr-info">
					<view class="icon"><u-icon name="map" size="40"></u-icon>当前地址</view>
					<view class="info">{{ currInfo.address }}</view>
				</view>
				<view class="return-addr">
					<u-button type="primary" text="重新获取" plain shape="circle"  @tap.stop="reverseAddress"></u-button>
				</view>
			</view>
			<view class="adress-list" :class="{'active-list':statusType == 2}">
				<view class="adress-wrapper">
					<view class="empty" v-if="addressList.length == 0">
						<view class="img">
							<image
								src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/xxdz.png">
							</image>
						</view>
						<view class="empty-title">请选择地址</view>
					</view>
					<view class="list-item" v-for="item in addressList" @click="handleChecked(item)">
						<view class="item-info">
							<view class="name">{{ item.title }}</view>
							<view class="detail">{{ item.address }}</view>
						</view>
						<view class="distance">
							约{{ item.distance }}km
						</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="store-wrapper">
					<view class="store-list">
						<view class="store-h">附近门店</view>
						<view class="store-item" v-for="item in storeList" @click="handleChecked(item)">
							<view class="store-info">
								<view class="store-img">
									<image :src="item.photo1"></image>
								</view>
								<view class="store-p">
									<view class="store-name">{{ item.name }}</view>
									<view class="store-rate">
										<image
											src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-tag.png">
										</image>
										<view class="rate">
											<text class="rate-num" v-if="item.score">{{item.score}}</text>
											<text v-else>暂无评分</text>
										</view>|
										<view class="pl">{{ item.evaluationNum || 0 }} 评论</view>
									</view>
									<view class="store-adress">
										{{ item.address }}
									</view>
								</view>
							</view>
							<view class="store-detail">
								<view class="store-tag">
									<view class="tag-list" v-for="label in item.promotionLabel"><u-icon
											name="checkmark-circle-fill" color="#7A6948"
											size="35"></u-icon>{{ label.labelName }}</view>
								</view>
								<view class="store-lx">
									<image
										src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-dh.png"
										@click="handleAction('map',item)"></image>
									<image
										src="https://coach-vehicle-uat-1313990257.cos.ap-beijing.myqcloud.com/miniapp/rescue/rescue-phone.png"
										@click="handleAction('phone',item)"></image>
								</view>

							</view>
						</view>
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar.vue'
	import QQMapWX from '@/lib/qqmap-wx-jssdk.js'
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from 'vuex'
	export default {
		name: 'selectRescueAddress',
		components: {
			navBar
		},
		computed: {
			...mapGetters('global', ['getSystemInfo'])
		},
		data() {
			return {
				info: '',
				title: '选择救援地址',
				statusType: 1,
				addressList: [],
				currInfo: {},
				keyword: '',
				storeList: [],
				formDatas: {},
				region:''
			}
		},
		methods: {
			// 初始化页面
			async initData(lng, lat) {
				this.formDatas.nowLng = lng
				this.formDatas.nowLat = lat
				const res = await this.$request({
					url: '/api-user/new-new-terminal/shopList',
					data: {
						...this.formDatas,
						sortType: 1,
						distance: null,
						pageSize: 30
					}
				}).catch((res) => {})
				this.storeList = res.datas.data
			},
			reverseAddress() {
				uni.showLoading({
					title: '加载中...'
				})
				const qqmapsdk = new QQMapWX({
					// 测试key
					key: this.$mapKey
				})
				qqmapsdk.reverseGeocoder({
					success: async (res) => {
						this.currInfo.location = res.result.location
						this.currInfo.address = res.result.address
						this.currInfo.type = this.statusType
						this.region = res.result.ad_info.city
						this.$forceUpdate()
						uni.hideLoading()
						this.initData(this.currInfo.location.lng, this.currInfo.location.lat)
					},
					fail: (error) => {
						console.error('error', error);
						uni.hideLoading()
					},
				})
			},
			handleChecked(item) {
				uni.navigateBack({
					delta: 1,
					animationDuration: 200
				});
				item.type = this.statusType
				if (this.statusType == 1) {
					this.getOpenerEventChannel().emit('setRescueAddress', item)
				} else {
				    let obj = null
					if(item.name){
						obj = {
							title: item.name,
							location: {
								lat: item.lat,
								lng: item.lng,
							},
							address: item.address
						}
					}else{
						obj = item
					}
					this.getOpenerEventChannel().emit('setRescueAddress', obj)
				}



			},
			setCurrentAddress() {
				uni.navigateBack({
					delta: 1,
					animationDuration: 200
				});
				this.getOpenerEventChannel().emit('setRescueAddress', this.currInfo)
			},
			handleAction(con, item) {
				if (con === 'phone') {
					// 区分设备
					if (uni.getSystemInfoSync().osName === 'ios') {
						uni.makePhoneCall({
							phoneNumber: item.phone
						})
					} else {
						uni.showModal({
							title: "拨打电话",
							content: item.phone,
							confirmText: "确认",
							cancelText: "取消",
							success: res => {
								if (res.confirm) {
									uni.makePhoneCall({
										phoneNumber: item.phone
									})
								}
							}
						})
					}
				} else {
					uni.openLocation({
						latitude: item.lat,
						longitude: item.lng,
						name: item.name,
						address: item.address,
					});
				}
			},
			//搜索救援地址
			handleSearch(val) {

				this.addressList = []
				if (val) {
					uni.showLoading({
						title: '加载中...'
					})
					let that = this
					const qqmapsdk = new QQMapWX({
						key: this.$mapKey
					})
					qqmapsdk.search({
						//搜索
						keyword: val,
						page_size: 20,
						region:this.region,
						auto_extend: 0,
						//设置周边搜索中心点 
						// 设置就是以这里为中心点搜索，注释掉也可以，以地图为中心搜索
						// location: `${that.currInfo.location.lat},${that.currInfo.location.lng}`,

						//搜索成功后的回调
						success: (res) => {

							if (res.data.length > 0) {
								res.data.forEach(item => {
									if(item.title.indexOf("[公交站]") != -1){
										item.address = item.ad_info.province+item.title+'-'+item.title
									}
									if(item.title.indexOf("[地铁站]") != -1){
										item.address = item.ad_info.province+item.address+item.title+'-'+item.title
									}
									item.distance = (item._distance / 1000).toFixed(2)
								})
							}
							uni.hideLoading()
							that.addressList = res.data
						},
						fail: function(res) {
							uni.hideLoading()
						},
						complete: function(res) {
							console.log(res);
						}
					});
				}

			}
		},
		onShow() {
			// this.initData()
		},
		onLoad(option) {
			this.reverseAddress()
			if (option.type == 1) {
				this.title = '选择救援地址'
				this.statusType = 1
			} else {
				this.title = '选择拖车目的地'
				this.statusType = 2
			}
		}
	}
</script>

<style scoped lang="scss">
	.select-rescue-wrap {
		height: 100%;
		width: 100%;
		overflow: hidden;

		.content-box {
			height: calc(100% - 128rpx);

			.search-box {
				padding: 14rpx 32rpx;
				background: #fff;
				margin-bottom: 14rpx;
			}

			.current-addr {
				background: #fff;
				padding: 28rpx 32rpx;
				display: flex;
				justify-content: space-between;
				margin-bottom: 14rpx;
				align-items: center;

				.addr-info {
					width: calc(100% - 160rpx);

					.icon {
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-size: 14px;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						margin-bottom: 16rpx;
					}

					.info {
						font-size: 14px;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: bold;
						color: #333333;
						word-wrap: break-all;
						overflow: hidden;
						line-break: anywhere;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						line-clamp: 2;
						-webkit-box-orient: vertical;
					}
				}

				.return-addr {
					width: 160rpx;

					/deep/ .u-button {
						height: 70rpx !important;
					}
				}
			}

			.adress-list {
				height: calc(100% - 258rpx);
				background: #fff;

				.adress-wrapper {
					height: 100%;
					overflow: hidden;
					overflow-y: auto;
				}

				.line {
					height: 20rpx;
					background: #f5f5f5;
				}

				.list-item {
					display: flex;
					justify-content: space-between;
					padding: 24rpx 0;
					border-bottom: 2rpx solid #EBEDF0;
					margin: 0 32rpx;
					align-items: center;

					.item-info {
						width: calc(100% - 180rpx);
						font-family: PingFangSC-Regular, PingFang SC;

						.name {
							font-size: 14px;
							color: #323233;
							margin-bottom: 16rpx;
							font-weight: 400;
							word-wrap: break-all;
							overflow: hidden;
							line-break: anywhere;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							line-clamp: 1;
							-webkit-box-orient: vertical;

						}

						.detail {
							font-size: 12px;
							color: #969799;
							word-wrap: break-all;
							overflow: hidden;
							line-break: anywhere;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							line-clamp: 1;
							-webkit-box-orient: vertical;
						}
					}

					.distance {
						width: 160rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #969799;
					}
				}

				.empty {
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #C4C4C4;
					height: 200rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;

					.empty-title {
						width: 100%;
						text-align: center;
					}

					.img {
						width: 100%;
						text-align: center;

						image {
							width: 300rpx;
							height: 134rpx;
						}
					}
				}

				.store-wrapper {
					height: calc(65% - 20rpx);
					overflow: hidden;
					overflow-y: auto;

					.store-h {
						font-size: 34rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #262626;
					}

					.store-list {
						padding: 20rpx;

						.store-item {
							border-bottom: 2rpx solid #eee;
							padding: 20rpx 0;
						}

						.store-info {
							display: flex;
							justify-content: flex-start;
							align-items: center;

							.store-img {
								width: 170rpx;
								height: 170rpx;
								border-radius: 10rpx;
								margin-right: 20rpx;

								image {
									width: 100%;
									height: 100%;
								}
							}

							.store-p {
								width: calc(100% - 180rpx);

								.store-name {
									font-size: 32rpx;
									font-family: PingFangSC-Semibold, PingFang SC;
									font-weight: 600;
									color: #262626;
									margin-bottom: 20rpx;
								}

								.store-rate {
									display: flex;
									font-size: 22rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #999999;
									margin-bottom: 20rpx;
									align-items: center;

									image {
										width: 123rpx;
										height: 30rpx;
									}

									.rate {
										margin-right: 20rpx;

										.rate-num {
											font-size: 28rpx;
											font-family: DINAlternate-Bold, DINAlternate;
											font-weight: bold;
											color: #F3260A
										}
									}

									.pl {
										margin-left: 20rpx;
									}
								}

								.store-adress {
									font-size: 22rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #666666;
									word-wrap: break-all;
									overflow: hidden;
									line-break: anywhere;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-line-clamp: 2;
									line-clamp: 2;
									-webkit-box-orient: vertical;
								}
							}
						}

						.store-detail {
							background: #FAFAFA;
							border-radius: 16rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 10rpx;

							.store-tag {
								width: calc(100% - 168rpx);
								display: flex;

								.tag-list {
									font-size: 24rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #7A6948;
									margin-right: 24rpx;
									display: flex;

								}
							}

							.store-lx {
								display: flex;

								image {
									width: 84rpx;
									height: 84rpx;
								}
							}
						}
					}
				}
			}

			.active-list {
				height: calc(100% - 100rpx);
				background: #fff;

				.adress-wrapper {
					height: 35%;
					overflow: hidden;
					overflow-y: auto;
				}
			}


		}
	}
</style>